<template>
  <div class="app-container" style="padding: 5px;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">同步条件设置</span><span style="color:red;margin-left: 3px;font-size: 12px;">[注：时间跨度建议不要跨越同步，耗时会比较长]</span>
      </div> 
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="创建时间" prop="createTimeRange">
          <el-date-picker
            v-model="queryParams.createTimeRange"
            type="datetimerange"
            align="right"
            :picker-options="pickerOptions"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']" @change="changeCreateTime">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="更新时间" prop="updateTimeRange">
          <el-date-picker
            v-model="queryParams.updateTimeRange"
            type="datetimerange"
            align="right"
            :picker-options="pickerOptions"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']" @change="changeUpdateTime">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="同步时间" prop="asyncTimeRange">
          <el-date-picker
            v-model="queryParams.asyncTimeRange"
            type="datetimerange"
            align="right"
            :picker-options="pickerOptions"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']" @change="changeAsyncTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-s-promotion" :disabled="btnflag" @click="asyncKhgl">确认同步</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top: 10px;" v-if="resInfo!=null">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">同步结果</span>
      </div> 
      <span style="color:green"> {{ start }} </span><br /><br />
      <span style="color:red"> {{ resInfo }} </span><br /><br />
      <span style="color:green"> {{ end }} </span>
    </el-card>
  </div>
</template>
<script>
import { asyncKhgl } from "@/api/system/crm/crm";

export default {
  name: "Khgl",
  data() {
    return {
      btnflag: false,
      resInfo: null,
      start:null,
      end:null,
      queryParams: {
        createTimeRange: null,
        updateTimeRange: null,
        asyncTimeRange: null,
        asyncTimeStart:null,
        asyncTimeEnd:null,
        createTimeStart:null,
        createTimeEnd:null,
        updateTimeStart:null,
        updateTimeEnd:null,
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
    };
  },
  created() {
    
  },
  methods: {
    asyncKhgl(){
      this.resInfo = null;
      this.start = null;
      this.end = null;
      if(this.queryParams.asyncTimeRange==null&&this.queryParams.createTimeRange==null&&this.queryParams.updateTimeRange==null){
        this.$message.error('请设置相应同步数据的时间！');
        return false;
      }else{
        if(this.queryParams.asyncTimeRange!=null&&(this.queryParams.createTimeRange!=null||this.queryParams.updateTimeRange!=null)){
          this.$message.error('同步时间与创建时间或更新时间不能同时设置');
          this.queryParams.asyncTimeRange = null;
          this.queryParams.createTimeRange = null;
          this.queryParams.updateTimeRange = null;
        }else{
          const data = {
            createTimeStart:this.queryParams.createTimeStart,
            createTimeEnd:this.queryParams.createTimeEnd,
            updateTimeStart:this.queryParams.updateTimeStart,
            updateTimeEnd:this.queryParams.updateTimeEnd,
            asyncTimeStart:this.queryParams.asyncTimeStart,
            asyncTimeEnd:this.queryParams.asyncTimeEnd,
          };
          this.btnflag = true;
          asyncKhgl(data).then(res =>{
            if(res.code===200){
              this.$modal.msgSuccess("同步成功");
              this.btnflag = false;
              this.resInfo = res.data.data;
              this.start = res.data.start;
              this.end = res.data.end;
            }
          })
        }
      }
    },
    changeAsyncTime(picker){
      this.queryParams.asyncTimeStart = picker[0];
      this.queryParams.asyncTimeEnd = picker[1];
    },
    changeUpdateTime(picker){
      this.queryParams.updateTimeStart = picker[0];
      this.queryParams.updateTimeEnd = picker[1];
    },
    changeCreateTime(picker){
      this.queryParams.createTimeStart = picker[0];
      this.queryParams.createTimeEnd = picker[1];
    },
  }
};
</script>